// out: ../css/task.css
@import url(base.less);
@import url(var.less);

body {
    background-color: @bg_color;
}

// 顶部
.nav {
    width: 100%;
    height: (44/@rem);
    display: flex;
    padding-left: (20/@rem);
    // line-height: (44/@rem);
    align-items: center;
    background-color: @text_white;
    position: sticky;
    top: 0;

    a {
        color: @text_black;
        font-size: (16/@rem);

        span {
            font-weight: 900;
        }
    }

    h2 {
        font-size: (16/@rem);
        color: @text_black;
        // font-weight: 700;
        margin-left: (128/@rem);
    }
}

// 等级
.grade {
    width: (356/@rem);
    height: (103/@rem);
    background-color: @text_white;
    margin: (10/@rem) auto;
    position: relative;


    .top {
        .left {
            font-size: (14/@rem);
            line-height: (20/@rem);
            color: @text_black;
            font-weight: 700;
            display: flex;

            p {
                position: absolute;
                left: 36./@rem;
                top: (28/@rem);
            }


            .top_right {
                width: (101/@rem);
                height: (30.9/@rem);
                line-height: (20/@rem);
                border-radius: (5/@rem) (5/@rem) (5/@rem) 0;
                color: @text_yellow;
                font-size: (14/@rem);
                background-image: linear-gradient(to right, #4D4D4D 100%, #363636 100%);
                margin-left: (13/@rem);
                padding-left: (11.7/@rem);
                display: flex;
                align-items: center;


                position: absolute;
                top: 21./@rem;
                left: 90./@rem;

                .icon-qia {
                    font-size: (25/@rem);
                    margin-right: (8/@rem);
                    color: @text_yellow;
                }
            }
        }
    }

    .bottom {
        position: absolute;
        top: (67/@rem);
        left: (36/@rem);
        font-weight: 700;


        a {
            font-size: (12/@rem);
            line-height: (17/@rem);
            color: @text_gray ;
            display: flex;

            .bottom_right {
                margin-left: 8./@rem;


                img {
                    width: 5/@rem;
                    height: 9./@rem;
                    margin-left: 5./@rem;
                    vertical-align: middle;

                }

            }


        }

    }
}

// 周期任务
.task {
    width: (356/@rem);
    height: (610/@rem);
    background-color: @text_white;
    margin: 0 auto 10./@rem;
    overflow: hidden;
    position: relative;

    .sign {
        width: 80./@rem;
        height: 31./@rem;
        line-height: 31./@rem;
        font-size: 14./@rem;
        border: 1./@rem solid @text_black;
        border-radius: 15.5./@rem;
        font-weight: 700;
        position: absolute;
        text-align: center;
        top: 82./@rem;
        right: 18./@rem;
    }

    .finish {
        width: 80./@rem;
        height: 31./@rem;
        line-height: 31./@rem;
        font-weight: 700;
        text-align: center;
        border: 1./@rem solid @text_black;
        border-radius: 15.5./@rem;
        font-size: 14./@rem;
        position: absolute;
        top: 174./@rem;
        right: 18./@rem;
    }

    .demo {
        margin-top: 22./@rem;
        margin-left: 26./@rem;

        a {
            font-size: (16/@rem);
            line-height: (22/@rem);
            font-weight: 700;
        }
    }

    .demo1 {
        margin-top: (24/@rem);
        margin-left: 25./@rem;

        ul {
            width: (306/@rem);
            color: @text_black;
            border-bottom: (1/@rem) solid @border_color;
            padding-bottom: (24/@rem);

            li {
                &:nth-child(1) {
                    font-size: (14/@rem);
                    line-height: (20/@rem);
                    margin-bottom: (6/@rem);
                }

                &:nth-child(2) {
                    font-size: (12/@rem);
                    line-height: (17/@rem);
                    color: @text_gray;

                    .num {
                        color: @text_black;
                    }
                }
            }
        }

        &:nth-child(7) {
            ul {
                border: unset;
                padding-bottom: 25./@rem;
            }

            li {
                &:nth-child(1) {
                    width: 314./@rem;
                }
            }
        }
    }
}

// 成长部分
.dev {
    width: (356/@rem);
    height: (249/@rem);
    background-color: @text_white;
    margin: 0 auto 37./@rem;
    overflow: hidden;
    position: relative;

    .finished {
        font-size: 14./@rem;
        line-height: 20./@rem;
        color: @text_gray;
        position: absolute;
        top: 69./@rem;
        right: 36./@rem;
    }

    .finish {
        width: 80./@rem;
        height: 31./@rem;
        line-height: 31./@rem;
        font-weight: 700;
        text-align: center;
        border: 1./@rem solid @text_black;
        border-radius: 15.5./@rem;
        font-size: 14./@rem;
        position: absolute;
        top: 169./@rem;
        right: 18./@rem;
    }

    .demo {
        margin-top: 22./@rem;
        margin-left: 26./@rem;

        a {
            font-size: (16/@rem);
            line-height: (22/@rem);
            font-weight: 700;
        }
    }

    .demo1 {
        margin-top: (24/@rem);
        margin-left: 25./@rem;

        ul {
            width: (306/@rem);
            color: @text_black;
            border-bottom: (1/@rem) solid @border_color;
            padding-bottom: (24/@rem);

            li {
                &:nth-child(1) {
                    font-size: (14/@rem);
                    line-height: (20/@rem);
                    margin-bottom: (6/@rem);
                }

                &:nth-child(2) {
                    font-size: (12/@rem);
                    line-height: (17/@rem);
                    color: @text_gray;

                    .num {
                        color: @text_black;
                    }
                }
            }
        }

        // &:nth-child(3) {
        //     ul {
        //         border: unset;
        //         padding-bottom: 32./@rem;
        //         background-color: red;
        //     }
        // }
    }

    .demo2 {
        margin-top: (24/@rem);
        margin-left: 25./@rem;

        ul {
            width: (306/@rem);
            color: @text_black;
            padding-bottom: (24/@rem);

            li {
                &:nth-child(1) {
                    font-size: (14/@rem);
                    line-height: (20/@rem);
                    margin-bottom: (6/@rem);
                }

                &:nth-child(2) {
                    font-size: (12/@rem);
                    line-height: (17/@rem);
                    color: @text_gray;

                    .num {
                        color: @text_black;
                    }
                }
            }
        }
    }
}

// 底部
.bot {
    margin-top: 37./@rem;
    text-align: center;
    padding-bottom: 28./@rem;
}